<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.min.js"></script>
</head>

<body>

    <table id="tab">
        <thead>
            <tr>
                <td>序号</td>
                <td>摘要</td>
                <td>金额</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="id">1</td>
                <td><input></td>
                <td><input class="price"></td>
                <td><input type="button" id="add" value="增加"></td>
            </tr>
        </tbody>

    </table>
    总金额：<input id="total">
    <script>
        function indexs() {
            $(".id").each(function(i) {
                $(this).text(i + 1);
            })
        }

        function change() {
            var total = 0.00;
            $(".price").each(function() {
                if ($(this).val()) {
                    total += parseFloat($(this).val());
                }
            })
            $("#total").val(total);
        }
        $(function() {
            $("#add").on("click", function() {
                    let id = $("tr").length
                    let html = `<tr><td class="id">1</td><td><input></td><td><input class="price"></td><td><input type="button" id="del" value="删除"></td></tr>`;
                    // append()在原内容后追加内容
                    $("#tab").append(html);
                    indexs();
                })
                // 总金额自动统计
            $(document).on("change", ".price", function() {
                change();
            })

            $(document).on("click", "#del", function() {
                $(this).parents("tr").remove();
                change();
                indexs();
            })
        })
    </script>

</body>

</html>